<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>《机器学习》知识点整理与展示</title>

    <!-- 调用static静态模板 -->
    <!--Bootstrap Stylesheet [ REQUIRED ]-->
    <link href="../static/css/bootstrap.min.css" rel="stylesheet">
    <link rel="shortcut icon" href="../static/images/logo.jpg">

    <!--Nifty Stylesheet [ REQUIRED ]-->
    <link href="../static/css/nifty.min.css" rel="stylesheet">

    <!--Nifty Premium Icon [ DEMONSTRATION ]-->
    <link href="../static/css/nifty-demo-icons.min.css" rel="stylesheet">

    <!--Demo [ DEMONSTRATION ]-->
    <link href="../static/css/nifty-demo-icons.min.css" rel="stylesheet">
    <link href="../static/css/nifty-demo.min.css" rel="stylesheet">
    <link href="../static/css/font-awesome.min.css" rel="stylesheet">

    <!--JAVASCRIPT-->
    <!--=================================================-->
    <!--Pace - Page Load Progress Par [OPTIONAL]-->
    <link href="../static/css/pace.min.css" rel="stylesheet">

    <script src="../static/js/pace.min.js"></script>

    <!--jQuery [ REQUIRED ]-->
    <script src="../static/js/jquery-2.2.4.min.js"></script>

    <!--BootstrapJS [ RECOMMENDED ]-->
    <script src="../static/js/bootstrap.min.js"></script>

    <!--NiftyJS [ RECOMMENDED ]-->
    <script src="../static/js/nifty.min.js"></script>
    <script src="../static/js/icons.js"></script>
    <script src="../static/js/echarts.min.js"></script>
    <script src="../static/js/tags.js"></script>

    <!--Demo script [ DEMONSTRATION ]-->
    <script src="../static/js/nifty-demo.min.js"></script>
    <style type="text/css">
        #tagsList {
            position: relative;
            width: 250px;
            height: 250px;
        }

        #tagsList a {
            position: absolute;
            top: 0px;
            left: 0px;
            font-family: Microsoft YaHei;
            color: gray;
            font-weight: bold;
            text-decoration: none;
            padding: 3px 6px;
        }

        #tagsList a:hover {
            color: #249e92;
            letter-spacing: 2px;
        }

        #search:focus {
            border: 1px solid #249e92;
        }
    </style>
</head>

<body>

    <div id="container" class="effect aside-float aside-bright mainnav-lg">

        <!--NAVBAR-->
        <!--===================================================-->
        <header id="navbar">
            <div id="navbar-container" class="boxed">

                <!--Brand logo & name-->
                <!--================================-->
                <div class="navbar-header">
                    <a class="navbar-brand">
                        <img src="../static/images/logo.jpg" alt="Nifty Logo" class="brand-icon">
                        <div class="brand-title">
                            <span class="brand-text">《机器学习》</span>
                        </div>
                    </a>
                </div>
                <!--================================-->
                <!--End brand logo & name-->

                <!--Navbar Dropdown-->
                <!--================================-->
                <div class="navbar-content clearfix">
                    <ul class="nav navbar-top-links pull-left">

                        <!--Navigation toogle button-->
                        <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                        <li class="tgl-menu-btn">
                            <a class="mainnav-toggle" href="#">
                                <i class="demo-pli-view-list"></i>
                            </a>
                        </li>
                    </ul>

                    <ul class="nav navbar-top-links pull-left">
                        <h4>《机器学习》知识点整理与展示</h4>
                    </ul>
                </div>
                <!--================================-->
                <!--End Navbar Dropdown-->
            </div>
        </header>
        <!--===================================================-->
        <!--END NAVBAR-->

        <div class="boxed">

            <!--CONTENT CONTAINER-->
            <!--===================================================-->
            <div id="content-container">

                <!--Page content-->
                <!--===================================================-->
                <div id="page-content">
                    <h4 class="text-main pad-btm bord-btm">知识点详情</h4>
                    <div class="row">
                        <div class="col-lg-6">
                        </div>
                        <div class="col-lg-2"></div>
                        <div class="col-lg-4">
                            <div class="input-group" id="search-node" style="width: 95%">
                                <input type="text" id="search-node-name" class="form-control input-lg"
                                    placeholder="请输入你要检索的知识点...">
                                <span class="input-group-addon btn btn-mint" onclick="searchNode()">搜索</span>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-8" style="height: 40px;" id="guanxi">
                        </div>
                        <div class="col-lg-6" id="nodeDetails" style="width: 60%;">
                            <h4 id="node-name"></h4>
                            <ul id="node-attributes"></ul>
                        </div>
                        <div class="col-lg-8" id="tagsList" style="width: 40%;">
                            <a href="#" data="机器学习">机器学习</a>
                            <a href="#" data="监督学习">监督学习</a>
                            <a href="#" data="无监督学习">无监督学习</a>
                            <a href="#" data="深度学习">深度学习</a>
                            <a href="#" data="强化学习">强化学习</a>
                            <a href="#" data="线性模型">线性模型</a>
                            <a href="#" data="决策树分类">决策树分类</a>
                            <a href="#" data="贝叶斯分类器">贝叶斯分类器</a>
                            <a href="#" data="集成学习">集成学习</a>
                            <a href="#" data="支持向量机">支持向量机</a>
                            <a href="#" data="聚类分析">聚类分析</a>
                        </div>
                    </div>
                </div>
                <!--===================================================-->
                <!--End page content-->

            </div>
            <!--===================================================-->
            <!--END CONTENT CONTAINER-->

            <!--MAIN NAVIGATION-->
            <!--===================================================-->
            <nav id="mainnav-container">
                <div id="mainnav">

                    <!--Menu-->
                    <!--================================-->
                    <div id="mainnav-menu-wrap">
                        <div class="nano">
                            <div class="nano-content">

                                <ul id="mainnav-menu" class="list-group">

                                    <!--Category name-->
                                    <li class="list-header">知识点可视化</li>

                                    <!--Menu list item-->
                                    <li>
                                        <a href="查询页面.html">
                                            <i class="fa fa-search" style="width:24px"></i>
                                            <span class="menu-title">
                                                <strong>检索知识点</strong>
                                            </span>
                                        </a>
                                    </li>

                                    <li>
                                        <a href="展示页面.html">
                                            <i class="fa fa-pie-chart" style="width:24px"></i>
                                            <span class="menu-title">
                                                <strong>知识点全貌</strong>
                                            </span>
                                        </a>
                                    </li>

                                    <li>
                                        <a href="增删改查页面.html">
                                            <i class="fa fa-pie-chart" style="width:24px"></i>
                                            <span class="menu-title">
                                                <strong>增删改知识点</strong>
                                            </span>
                                        </a>
                                    </li>

                                    <!--Menu list item-->
                                    <li class="list-divider"></li>

                                    <!--Category name-->
                                    <li class="list-header">问答系统</li>

                                    <!--Menu list item-->
                                    <li>
                                        <a href="{{ url_for('KGQA') }}">
                                            <i class="fa fa-question-circle" style="width:24px"></i>
                                            <span class="menu-title">知识点问答</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>

        </div>

        <footer id="footer">
            <p class="pad-lft">Copyright&#0169; 20221113170 刘盛东 《机器学习》知识点整理与展示 &nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;All Rights
                Reserved </p>
        </footer>
        <!--===================================================-->
        <button class="scroll-top btn">
            <i class="pci-chevron chevron-up"></i>
        </button>
        <!--===================================================-->
    </div>
    <!--===================================================-->
    <!-- END OF CONTAINER -->

    <script type="text/javascript">
        $(document).keypress(function (e) {
            // 回车键事件  
            if (e.which == 13) {
                searchNode();
            }
        });

        window.onresize = function () {
            myChart.resize();
        }

        $.ajaxSetup({ async: false });
        var myChart = echarts.init(document.getElementById("guanxi"));
        myChart.showLoading();

        myChart.hideLoading();
        option = {
            // backgroundColor: "white",
            title: {
                // text: '机器学习知识图谱',
                textStyle: {
                    // color: "white",
                    fontWeight: "lighter",
                }
            },
            animationDurationUpdate: 1500,
            animationEasingUpdate: 'quinticInOut',
            legend: {
                x: "center",
                show: true,
                data: ["机器学习", "深度学习", "监督学习", "无监督学习", "强化学习", "其他"]
            },
            series: [
                {
                    type: 'graph',
                    layout: 'force',
                    symbolSize: 50,
                    edgeSymbol: ['circle', 'arrow'],
                    edgeSymbolSize: [4, 4],
                    edgeLabel: {
                        normal: {
                            show: true,
                            textStyle: {
                                fontSize: 10
                            },
                            formatter: "{c}"
                        }
                    },
                    force: {
                        repulsion: 2500,
                        edgeLength: [10, 100]
                    },
                    focusNodeAdjacency: true,
                    draggable: true,
                    roam: true,
                    categories: [{
                        name: "机器学习",
                    }, {
                        name: "深度学习",
                    }, {
                        name: "监督学习",
                    }, {
                        name: "无监督学习",
                    }, {
                        name: "强化学习",
                    }, {
                        name: '其他'
                    }
                    ],
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                                fontSize: 10
                            },
                        }
                    },
                    force: {
                        repulsion: 1000
                    },
                    tooltip: {
                        formatter: function (node) { // 区分连线和节点，节点上额外显示其他数字
                            if (!node.value) {
                                return node.data.name;
                            } else {
                                return node.data.name + ":" + node.data.showNum;
                            }
                        },
                    },
                    lineStyle: {
                        normal: {
                            opacity: 0.9,
                            width: 1,
                            curveness: 0.3
                        }
                    },
                    // progressiveThreshold: 700,
                    nodes: [],
                    links: [],
                }
            ]
        };

        function searchNode() {
            var nodeName = $("#search-node-name").val();
            if (!nodeName) {
                alert("节点名称不能为空！");
                return;
            }

            $.ajax({
                url: 'http://127.0.0.1:5000/get_node_details',
                type: 'GET',
                data: { node_name: nodeName },
                success: function (response) {
                    if (response.message) {
                        alert(response.message);
                    } else {
                        var nodeDetails = response.node;
                        $("#node-name").text(nodeDetails.Name);
                        $("#node-attributes").empty();
                        for (var key in nodeDetails) {
                            if (key !== 'Name') {
                                $("#node-attributes").append("<li>" + key + ": " + nodeDetails[key] + "</li>");
                            }
                        }
                    }
                },
                error: function (xhr, status, error) {
                    alert("请求失败：" + error);
                }
            });
        }
    </script>
</body>
</html>